<template>
    <div class="main" v-loading="loading" element-loading-text="拼命加载中">
        <div class="top">
            <div class="img" v-for="(item1,i) of trickHomeImg" :key="i" @click="details()">
                <div>
                    <img :src="item1.img" alt="">
                    <div><span class="span1">{{item1.lable}}</span><span class="span2">{{item1.price}}</span></div>
                </div>
            </div>
        </div>
        <div class="nav">
            <el-menu class="el-menu-demo" mode="horizontal" background-color="#ddd" text-color="black">
                <el-menu-item v-for="(item2,i) in trickHomeTitle" :key="i" @click="chuan(item2.address)">{{item2.address}}</el-menu-item>
            </el-menu>
        </div>
        <div class="ul">
            <div class="li">
                    <div v-for="(item3,i) of trickHomeRecom1" :key="i" @click="tiao(item3.mid,item3.address)">
                        <div><span class="text1">{{item3.tlable}}</span><div class="text2">特价</div><div class="text3">{{item3.price}}</div></div>
                    </div>
            </div>
            <div class="li">
                <div v-for="(item4,i) of trickHomeRecom2" :key="i" @click="tiao(item4.mid,item4.address)">
                    <div><span class="text1">{{item4.tlable}}</span><div class="text2">特价</div><div class="text3">{{item4.price}}</div></div>
                </div> 
            </div>
            <div class="li">
                <div v-for="(item5,i) of trickHomeRecom3" :key="i" @click="tiao(item5.mid,item5.address)">
                    <div><span class="text1">{{item5.tlable}}</span><div class="text2">特价</div><div class="text3">{{item5.price}}</div></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name:"bottomMain",
    data(){
        return{
            trickHomeImg:"",
            trickHomeTitle:"",
            trickHomeRecom1:[],
            trickHomeRecom2:[],
            trickHomeRecom3:[],
            loading:true,
        }
    },
    mounted(){
        this.loading=true
        this.timer()
        this.$http.get("/trickHomeImg").then(reuslt=>{
            this.trickHomeImg=reuslt.data.data
        })
        this.$http.get("/trickHomeTitle").then(reuslt=>{
            this.trickHomeTitle=reuslt.data.data
        })
        this.$http.post("/trickHomeRecom",{address:"上海"}).then(result=>{
            this.trickHomeRecom1=(result.data.data.slice(0,4))
            this.trickHomeRecom2=(result.data.data.slice(4,8))
            this.trickHomeRecom3=(result.data.data.slice(8,12))
            this.loading=false
        })
    },
    methods: {
        open(){
            this.$message({
            message: '网络异常，请稍后再试',
            type: 'warning',
            offset:100
            });
        },
        timer(){
            setTimeout(()=>{
              if(this.loading){
                this.open()
                this.loading=false
              }else{
                  return
              }
            },5000)
        },
        details(){
            this.$router.push({path:"/ticket/detail",query:{mid:2,address:"北京"}})
        },
        chuan(title){
            this.loading=true
            this.timer()
            this.$http.post("/trickHomeRecom",{address:title}).then(result=>{
                this.trickHomeRecom1=(result.data.data.slice(0,4))
                this.trickHomeRecom2=(result.data.data.slice(4,8))
                this.trickHomeRecom3=(result.data.data.slice(8,12))
                this.loading=false
            })
        },
        tiao(mid,address){
            this.$router.push({path:"/ticket/detail",query:{mid:mid,address:address}})
        },
    },
}
</script>

<style scoped lang="scss">
a{
    text-decoration: none;
}
.main{
    width: 100%;
    margin-top: 20px;
    height: 500px;
    // background-color: antiquewhite;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 15px;
    .top{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        cursor: pointer;
        .img{
            div{
                height: 180px;
                overflow: hidden;
                img{
                    width: 280px;

                }
                div{
                    margin-top: -65px;
                    color: white;
                    background-color: black;
                    opacity: 0.7;
                    width: 280px;
                    .span1{
                        margin-left: 10px;
                        font-size: 20px;
                    }
                    .span2{
                        font-size: 20px;
                        margin-left: 100px;
                    }
                }
            }
        }
    }
    .nav{
        margin-top: 10px;
    }
    .ul{
        display: flex;
        justify-content: space-between;
        left: auto;
        .li:last-child{
            border-right: 0;
        }
        .li{
        margin-top: 20px;
        width: 380px;
        height: 195px;
        // background-color: red;
        border-right: 1px solid #ddd;
        div{
            // background-color: antiquewhite;
            height: 55px;
            div{
                width: 100%;
                font-size: 16px;
                color: #808080;
                .text1{
                    margin-left: 10px;
                    cursor: pointer;
                }
                .text2{
                    margin-top: -20px;
                    margin-left: 170px;
                    cursor: pointer;
                }
                .text3{
                    font-size: 20px;
                    color: #41c1ec;
                    margin-top: -57px;
                    margin-left: 300px;
                    cursor: pointer;
                }
            }
        }
    }
    }
}
.el-menu--horizontal>.el-menu-item{
    font-size: 16px !important;
    margin-left: 25px !important;
}
.el-menu--horizontal>.el-menu-item.is-active{
    border-bottom: 0 !important;
}
</style>
